<template>
  <el-table :data="table.data" style="width: 100%" :height="height" :span-method="objectSpanMethod">
    <el-table-column label="乡镇街道">
      <el-table-column class-name="invisible-col" prop="county" width="150" />
      <el-table-column class-name="invisible-col" prop="town" width="150" />
    </el-table-column>
    <el-table-column prop="sgCount" label="事故起数" />
    <el-table-column prop="sgCountRatio" label="占总数" />
    <el-table-column prop="swrsCount" label="死亡人数" />
    <el-table-column prop="swrsCountRatio" label="占总数" />
    <el-table-column prop="ssrsCount" label="受伤人数" />
    <el-table-column prop="ssrsCountRatio" label="占总数" />
  </el-table>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  height: {
    type: Number,
    default: 400
  },
  data: {
    type: Array
  }
})


const table = computed(() => {
  const data = []
  const groups = {}
  for (let i = 0; i < props.data.length; i++) {
    const item = props.data[i]
    for (let j = 0; j < item.dataList.length; j++) {
      data.push({ county: item.county, ...item.dataList[j], length: item.dataList.length })
    }
  }

  for (let i = 0; i < data.length; i++) {
    const group = groups[data[i].county]
    if (!group) {
      groups[data[i].county] = {
        rowIndex: i,
        num: data[i].length || 0
      }
    }
  }

  return {
    data,
    groups
  }
})

const objectSpanMethod = ({ row, rowIndex, columnIndex }) => {
  const group = table.value.groups[row.county]
  if (columnIndex === 0) {
    if (rowIndex === group.rowIndex) {
      return {
        rowspan: group.num,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
